<template>
    <div>
        <Modal :title="titleModal" width="300" v-model="isShowNoteModal" @on-cancel="closeModal" @on-ok="confirmModal"  :mask-closable="false" :closable="false">
            <Form v-model="formItem" :label-width="80">
                <FormItem label="文件名：">
                    <Input v-model.trim="formItem.fileName" @input="inputChange" placeholder="请输入文件名..."/>
                </FormItem>
                <FormItem label="文件描述:">
                    <Input v-model="formItem.description" placeholder="请输入文件描述..."/>
                </FormItem>
            </Form>
            <div slot="footer" style="text-align: center">
                <Button @click="closeModal">取消</Button>
                <Button type="primary" @click="confirmModal()">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="tsx">
import { Component, Prop } from "vue-property-decorator";
import _ from 'lodash';
import { NOTE, PAGE, SAVE, INFO, APPD } from '@/store/modules/crud/keys'
import MiXinModal  from '@/mixin/views/modal';

@Component
export default class TheNoteModal extends MiXinModal {
    @Prop(Boolean) isShowNoteModal!: boolean;
    @Prop(String) id!: string;
    formItem: any = {
        id: "",
        fileName: "",
        description: ""
    }
    titleModal = "创建文件";
    get _name(){ return NOTE; }

    closeModal(){
        this.$emit("close-modal");
        this.titleModal = "创建文件";
    }
    confirmModal(){
        if(this.formItem){
            const fileName = this.formItem.fileName;
            if(fileName != "" && fileName != undefined){
                this.$store.commit(INFO,{name: this._name, info: null});
                this.$store.commit(INFO,{name: this._name, info: this.formItem});
                this.$store.dispatch(SAVE, {name: this._name });
                window.sessionStorage.removeItem("appd");
            }
        }
        this.closeModal();
    }
    updated(){
        // this.$set(this.formItem,"fileName",this.formItem.fileName);
        console.log('updated was execute',this.isShowNoteModal, this.id);
        if(this.id != ''){
            this.titleModal = "更名";
            this.formItem = this.info;
        }
    }
    async mounted(){
        console.log('mounted was executed');
    }
    beforeMounted(){
        console.log('beforeMounted was execute');
    }
    inputChange(){
        // this.$forceUpdate()  // 强制刷新
    }
}
</script>

<style scoped>

</style>
